<template>
  <div class="header">
    <span>{{ nav.CompanyNews }} / {{ nav.NewArrivals }}</span>
    <div class="lang-box" @click="openLang">
      <img v-show="nav.nowLang === '中文'" class="c-icon" src="/image/icon/cn.png" alt="" />
      <img v-show="nav.nowLang === 'English'" class="c-icon" src="/image/icon/en.png" alt="" /> {{ nav.nowLang }}
      <CaretDownOutlined class="rightIcon" />
      <div v-if="langShow" class="change-box">
        <div :class="['stit',nav.nowLang === 'English'?'stitAct':'']" @click="changeLang('en')">english</div>
        <div :class="['stit',nav.nowLang === '中文'?'stitAct':'']" @click="changeLang('cn')">中文</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { language, conf } from "~/conf";
const { nav } = language;
let langShow = ref(false);
const openLang = () => {
  langShow.value = !langShow.value;
};
const changeLang = (type: "en" | "cn") => {
  window.location.href = conf[type].href;
};
</script>

<style lang="stylus" scoped>
.header{
  position relative
  height 40px
  background #000000
  color #fff
  text-align center
  font-size 16px
  line-height 40px
  .lang-box{
    position absolute;
    right 54px
    top 50%;
    transform translateY(-50%);
    display flex;
    justify-content flex-start;
    align-items center
    cursor pointer
  }
  .c-icon{
    width:30px
    margin-right 12px
  }
  .rightIcon{
    margin-left 5px
  }
  .change-box{
    position absolute;
    left 50%;
    top 40px;
    transform:translateX(-50% + 10px)
    color:#000
    border 1px solid #000;
    border-top 0
    box-shadow:0 0 10px rgba(0,0,0,.2)
    .stit{
      padding 0 20px
      transition all .3s
      cursor pointer
    }
    .stitAct{
      background rgba(0,0,0,.7);
      color:#fff
    }
    .stit:hover{
      background rgba(0,0,0,.2)
    }
  }
}
</style>
